

function Board01(containerId, componentId, title, modelCode) {

    this.componentType = "Board01";
    this.title = title;
    this.containerId = containerId;
    this.componentId = componentId;
    this.canvasWith = 256;
    this.canvasHeight = 256;
    this.config = [];
    
    var canvas = document.createElement('canvas');
    canvas.id = componentId;
    canvas.width = 256;
    canvas.height = 256;
    
    var container = document.getElementById(containerId);
    container.appendChild(canvas);
    
    var canvasObj = document.getElementById(componentId);
    
    this.ctx = canvasObj.getContext('2d');
    
    this.isBoard0101 = function() {
        return true;
    };
    
    this.drawWarning = function() {
        var headerPadding = 12;
        var warningText = '#warning#';
        this.ctx.font = '12px Arial';
        this.ctx.fillStyle = '#FFFF00';
        this.ctx.textAlign = 'right';
        this.ctx.fillText(warningText, this.canvasWith - headerPadding, 20);
        drawTitle(this.ctx, this.title);        
    };
    
    this.restoreInitStatus = function() {
        var data = []; 
        for ( var i = 0; i < this.config.length; i++) {
            var cfg = this.config[i];
            var pId = cfg['pId'];
            var shortName = this.configMapping[pId]['p-short-name'];
            var unit = this.configMapping[pId]['p-unit'];
            data.push([shortName, unit, false]);
        }
        this.init();
        drawTitle(this.ctx, this.title);
        this.drawData(data);
    };
    
    this.prepareLiveView = function() {
        var data = []; 
        for ( var i = 0; i < this.config.length; i++) {
            var cfg = this.config[i];
            data.push(["loading", "...", false, cfg.sId, cfg.pId]);
        }
        this.oldData = data;
        this.init();
        drawTitle(this.ctx, this.title);
        this.drawData(data);
    };
    
    this.updateData = function(siteId, paramId, newData) {
//       sample newData : 
//       {
//             val : "",
//             hasAlarm : true
//       }
        
        var data = this.oldData;
        var isAlarmAll = true;
        
        var isRedraw = false;
        for(var i = 0, n = data.length; i < n; i++) {
            var temp = data[i];
            var sIdTemp = temp[3];
            var pIdTemp = temp[4];
            if(sIdTemp == siteId && pIdTemp == paramId) {
                temp[0] = newData['val'];
                var unit = this.configMapping[pIdTemp]['p-unit'];
                temp[1] = unit;
                temp[2] = newData['hasAlarm'];
                isRedraw = true;
            }
            var hasAlarm = temp[2];
            isAlarmAll = isAlarmAll && hasAlarm;
        }
        
        this.oldData = data;
        
        if(isRedraw) {
            this.init();
            if(isAlarmAll) {
//              this.drawWarning();
            }
            drawTitle(this.ctx, this.title);
            this.drawData(data);
        }
    };
    
    this.drawData = function(data) {
        var ctx = this.ctx;
        ctx.save();

        var lineHeight = 30;
        var x = 175;
        var startY = 130;
        for ( var i = 0; i < data.length; i++) {

            var y = startY + i * lineHeight;

            // value
            ctx.font = '30px led-font';
            ctx.textAlign = 'right';
//            var hasAlarm = data[i][2] || false;
//            if(hasAlarm) {
//                ctx.fillStyle = '#FFFF00';
//            } else { 
//                ctx.fillStyle = '#000066';
//            }
            // set color alarm
            ctx.fillStyle = '#009999';
            var alarmState = data[i][2];
//            if(alarmState !== undefined && alarmState !== "2") {
            if(alarmState !== undefined) {
                var alarmStateMapping = EMS_CONSTS.ALARM_STATE_MAPPING;
                alarmState = alarmStateMapping[alarmState];
                if(alarmState !== undefined) {
                    ctx.fillStyle = alarmState['color'];
                }
            }
            ctx.fillText(data[i][0], x, y);

            // unit
//            ctx.textAlign = 'left';
//            ctx.font = '25px led-font';
//            ctx.fillText(data[i][1], x + 15, y);
            drawUnit(ctx, data[i][1], x + 5, y);
        }

        ctx.restore();
//      this.ctx.save();
//
//        var lineHeight = 30;
//        var x = 175;
//        var startY = 130;
//        for ( var i = 0; i < data.length; i++) {
//
//            var y = startY + i * lineHeight;
//
//            // value
//            this.ctx.font = '30px led-font';
//            this.ctx.textAlign = 'right';
//            this.ctx.fillStyle = '#000066';
//            // minhnhut.pham MODIFY START
//            // ctx.fillText(data[i].mId + '.' + data[i].pId, x, y);
//            this.ctx.fillText(data[i]['paramShortName'], x, y);
//            // minhnhut.pham MODIFY END
//
//            // unit
//            this.ctx.textAlign = 'left';
//            this.ctx.font = '25px led-font';
//            this.ctx.fillText('', x + 15, y);
//        }
//        this.ctx.restore();
    };
    
    this.init = function() {
        var mConfigs = {};
        drawBaseMeter(this.ctx, this.canvasWith, this.canvasHeight, "", "", "", "", mConfigs);
//      drawModel(this.ctx, modelCode);
        drawModel(this.ctx, "");
        drawTitle(this.ctx, this.title);
        this.mConfigs = mConfigs;
    };
    
    this.addConfig = function(orderNumber, mId, pId) {
        this.config[orderNumber] = [mId, pId];
    };
    
    this.removeConfig = function(orderNumber) {
        this.config[orderNumber] = ["",""];
    };
    
    this.setConfig = function(config) {
        this.config = config;
    };
    
    this.getConfig = function() {
        return this.config;
    };
    
    this.setTitle = function (title) {
        this.title = title;
    };
    
    this.setConfigMapping = function(mapping) {
        this.configMapping = mapping;
    };
    
    this.getLiveViewCfg = function(json) {
        json.type = this.componentType;
        var cfg = {
            title : this.title,
            params : this.config,
        };
        json.config = cfg;
        return json;
    };
//  return this.init();

}
var M_BACKGROUND = "m_bg";

var drawBaseMeter = function(ctx, meterWidth, meterHeight, bgColor, meterBgColor, borderColor, gapColor, mConfigs) {

    if(meterBgColor=="") {
//      meterBgColor = "#99CCFF";
        meterBgColor = "#FFFFFF";
    }
    borderColor = "#202020";
    gapColor = "#404040";
    
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    
    ctx.save();
    
    if(bgColor != "") {
        ctx.fillStyle = bgColor;
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }
    
    var lineWidth = 20;     
    var x1 = lineWidth/2;
    var y1 = lineWidth/2;
    
    ctx.fillStyle = borderColor;
    ctx.fillRect(x1, y1, meterWidth - lineWidth, meterHeight - lineWidth);

    ctx.lineJoin = 'round';
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = borderColor;
    ctx.strokeRect(x1, y1, meterWidth - lineWidth, meterHeight - lineWidth);
    
    var pTop = 6;
    x1 = lineWidth/2;
    y1 = lineWidth + pTop;
    var currWidth = meterWidth - x1*2;
    var currHeight = meterHeight - lineWidth*2 - pTop;
    ctx.fillStyle = gapColor;
    ctx.fillRect(x1, y1, currWidth, currHeight);
    
    var margin = 4;
    x1 += margin;
    y1 += margin;
    currWidth -= margin*2;
    currHeight -= margin*2;
    ctx.fillStyle = meterBgColor;
    ctx.fillRect(x1, y1, currWidth, currHeight);
    
    mConfigs[M_BACKGROUND] = {};
    mConfigs[M_BACKGROUND]["x"] = x1;
    mConfigs[M_BACKGROUND]["y"] = y1;
    mConfigs[M_BACKGROUND]["w"] = currWidth;
    mConfigs[M_BACKGROUND]["h"] = currHeight;
    
};

var drawModel = function(ctx, model) {
    var headerPadding = 12;
    ctx.textAlign = 'left';
    ctx.font = ' 12px Arial ';
    ctx.fillStyle = '#E6E6E6';
    ctx.fillText(model, headerPadding, 20);
};

var drawTitle = function(ctx, title) {

    var titles = title.split(' ');
    var count = 0;
    title = "";
    for(var i = 0; i < titles.length; i++) {
        count += titles[i].length + 1;
        if(count > 62) {
            title += "...";
            break;
        }
        title += titles[i] + " ";
    }
    ctx.textAlign = 'left';
    ctx.font = '20px Arial';
    ctx.fillStyle = '#000066';
    wrapText(ctx, title, 20, 50, 215, 22);
};

var wrapText = function (ctx, text, x, y, maxWidth, lineHeight) {
    
    var line = '';
    var words = text.split(' ');
    for ( var n = 0; n < words.length; n++) {

        var testLine = line + words[n] + ' ';
        var metrics = ctx.measureText(testLine);
        var testWidth = metrics.width;

        if (testWidth > maxWidth && n > 0) {
            ctx.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
        } else {
            line = testLine;
        }
    }
    
    ctx.fillText(line, x, y);
};